<template>
	<view class="Login">
		<uni-icons type="back" size="36" color="#fff" @click="back"></uni-icons>
		<view class="login_title">hellow~</view>
		<view class="login_p">欢迎来到豫忧社，打卡分享身边好商家！</view>
		
		<view class="count">
			<view class="list">
				<view :class="navIndex==1?'active':''" @click="changeBtn('1')">
					<text>快捷登陆</text>
				</view>
				<view :class="navIndex==2?'active':''" @click="changeBtn('2')">
					<text>账号登陆</text>
				</view>
			</view>
			<view class="conunt">
				<view class="content" :class="navIndex==1?'active':''"  v-if="navIndex==1">
					<div class="contentList">
						<u--form labelPosition="left" :rules="rules" :model="phoneForm" ref="form1">
							<u-form-item prop="phone">
								<u-input v-model="phoneForm.phone"  placeholder="请输入手机号码" class="phones"/>
							</u-form-item>
							<u-form-item prop="code" labelWidth="80" class="codes">
								<u--input v-model="phoneForm.code" class="codeInput" border="none" placeholder="请填写验证码"></u--input>
								<u-button slot="right" class="btn" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1"></u-button>
							</u-form-item>
						</u--form>
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="20"
							@start="disabled1 = true"
							@end="disabled1 = false"
						></u-code>
						<button type="primary" class="submit" @click="sublitPhone()">立即登陆</button>
					</div>
					<div class="font30">未注册的手机号码验证后自动创建账户</div>
					<div class="check">
						<radio-group><radio></radio></radio-group>
						<view class="rt">
							<text>我已阅读并同意</text>
							<unilink>《豫优社用户服务协议》</unilink>、<unilink>《隐私政策》</unilink>
						</view>
					</div>
				</view>
				<view class="content" :class="navIndex==2?'active2':''"  v-if="navIndex==2">
					<view class="contentList">
						<input class="uni-input" name="username" placeholder="请输入账号" v-model="phoneForm.phone"/>
						<input class="uni-input" name="code" placeholder="请输入密码" v-model="phoneForm.codeNum"/>
						<button type="submit" class="submit" @tap="submitName()">立即登陆</button>
					</view>
					<div class="check">
						<radio></radio>
						<view class="rt">
							<text>我已阅读并同意</text>
							<unilink>《豫优社用户服务协议》</unilink>、<unilink>《隐私政策》</unilink>
						</view>
					</div>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" @close="close" mode="center" class="popup">
			<view class="Loginyzm">
				<text>验证码 : </text>
				<text v-html="yzm"></text>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled1: false,
				tips:'',
				navIndex:1,
				show: false,
				yzm:'22323',
				phoneForm:{
					code:'',
					phone:null,
					password:''
				},
				rules:{
					// 手机号
					phone: [
						{required: true,message: '请输入手机号',trigger: ['change', 'blur'],},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur',],
						}
					],
					codeNum:{require:true,trigger: ['change', 'blur']}
				}
			}
		},
		methods: {
			getCode(){					
				// 点击获取请求验证吗
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
						uni.request({
							url:"/user/code",
							method:"POST",
							data:{
								phone :this.phoneForm.phone
							},
							header:{
								'content-type': 'application/x-www-form-urlencoded',
								'Authorization':'37E8BF7C067ADECF4DE3DDCFCC7CCB40'
							} ,
							success:data => {
								console.log('验证码',data.data)
								if(data.data.success){								
									// this.show = true;
									this.yzm = data.data.data
								}
							}
						})
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			changeBtn(num){
				this.navIndex = num
			},
			sublitPhone(){
				uni.request({
					url:'/user/login',
					method:'post',
					data:{
						"phone":this.phoneForm.phone,
						'code':this.phoneForm.code
					},
					success: (va) => {
						console.log(va)
						if(va.data.success){
							console.log(va.data)
							window.localStorage.yystoken = va.data.data
							uni.showLoading({
								title: '登录成功'
							})
							setTimeout(() => {
								uni.hideLoading();
								uni.switchTab({
									url:'/pages/home/home'
								})
							}, 2000);
						}else{
							uni.showLoading({
								title: '登录失败'
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 2000);
						}
					}
				})
			},
			submitName(){
				uni.request({
					url:'/user/login',
					method:'post',
					data:{
						"phone":this.phoneForm.phone,
						"password":this.phoneForm.password
					},
					success: (va) => {
						console.log(va)
						if(va.data.success){
							window.localStorage.yystoken = va.data.data
							uni.showLoading({
								title: '登录成功'
							})
							setTimeout(() => {
								uni.hideLoading();
								uni.switchTab({
									url:'/pages/home/home'
								})
							}, 2000);
						}else{
							uni.showLoading({
								title: '登录失败'
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 2000);
						}
					}
				})
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			back(){
				uni.navigateBack()
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.Loginyzm{
		padding: 70rpx 80rpx;
		border-radius: 6rpx;
		text-align: center;
		.u-popup__content{
			width: 90%;
		}
		text{
			display: inline-block;
			margin: 0 2rpx;
			font-weight: bold;
		}
	}
	.Login {
	  background-color:  rgba(22, 132, 63, 1);
	  position: relative;
	  overflow: hidden;
	  height: 100vh;
		padding: 28rpx;
		.login_title{
			font-size: 69rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 96rpx;
			margin-top: 12vh;
		}
		.login_p{
			font-size: 27rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 13rpx;
		}
		.count{
			.list{
				display: flex;
				margin-top: 100rpx;
				view{
					width: 50%;
					text-align: center;
					color: #FFFFFF;
					font-size: 38rpx;
					font-weight: bold;
					&.active{
						color: #16843F;
						
						text{
							background: #fff;
							position: relative;
							padding-bottom: 30rpx;
							&::after{
								content: '';
								width: 29rpx;
								height: 12rpx;
								background: #16843F;
								border-radius: 6rpx;
								position: absolute;
								bottom: 0;
								left: 50%;
								margin-left: -14.5rpx;
							}
						}
					}
					text{
						display: block;
						padding: 19rpx 10rpx 10rpx;
						
					}
					&:nth-child(1){
						text{
							border-radius: 40rpx 70rpx 0 0;
							border-top-right-radius: 70rpx 120rpx;
						}
					}
					&:nth-child(2){
						text{
							border-radius: 70rpx 40rpx 0 0;
							border-top-left-radius:70rpx 120rpx;
						}
					}
				}
			}
		}
		
	}
	.contentList{
		background-color: #fff;
		border-radius: 0 0 40rpx 40rpx;
		padding: 38rpx 90rpx;
		.submit{
			background: #16843F;
			box-shadow: 0rpx 12rpx 23rpx -6rpx rgba(22,132,63,0.56);
			border-radius: 49rpx;color: #FFFFFF;
			font-size: 46rpx;
			line-height: 2;
			font-weight: 500;
			margin-bottom: 18rpx;
		}
		.code{
			position: relative;
			input{
				padding-right: 227rpx;
			}
			.btn{
				border: 0;
				position: absolute;
				z-index: 2;
				top: 0;
				padding: 0;
				right: 36rpx;
				height: auto;
				line-height: 1;
				background: none;
				top: 50%;
				transform: translateY(-50%);
				color: #16843F;
				font-size: 30rpx;
				border-left: 2rpx solid #979797;
				padding-left: 26rpx;
				border-radius: 0;
				box-shadow: none;
				&::after{
					display: none;
				}
				
			}
		}
		input{
			height: 92rpx;
			background: #F3F9F6;
			padding: 0 40rpx;
			border-radius: 46rpx;
			margin-bottom: 42rpx;
		}
		
	}
	.phones{
		height: 92rpx;
		background: #F3F9F6;
		padding: 0 40rpx !important;
		border-radius: 46rpx;
		border: none;
	}
	.conunt{
		.content.active{
			.contentList{
				border-radius: 0 40rpx 40rpx 40rpx;
			}
		}
		.content.active2{
			.contentList{
				border-radius: 40rpx  0 40rpx 40rpx;
			}
		}
		.font30{
			font-size: 31rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			margin-top: 23rpx;
		}
	}
	.check{
		display: flex;
		margin-top: 12vh;
		color: #fff;
		input{
			width: 37rpx;
			height: 37rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		text{
			opacity: 0.7;
		}
		radio-group{
			background: none;
		}
		radio{
			background: none;
		}
	}
.codes{
	position: relative;
	height: 92rpx;
	line-height: 92rpx;
	background: #F3F9F6;
	padding: 0rpx 40rpx;
	border-radius: 46rpx;
	margin-bottom: 40rpx;
	margin-top: 40rpx;
	justify-content: center;
	.codeInput{
		padding-right: 227rpx;
		border-right: 1px solid #979797;
		border-radius: 0;
	}
	.btn{
		color: #16843F;
		border: none;
		padding-left: 30rpx;
	}
}
</style>
